<template>
    <v-dialog
            width="500"
            v-model="show"
    >
        <v-card>
            <v-list class="list" color="transparent">
                <v-list-item-group
                        color="primary"
                >
                    <v-list-item
                            link
                            @click="goto('/user')"
                            color="transparency"
                    >
                        <v-list-item-icon>
                            <v-icon>mdi-clock</v-icon>
                        </v-list-item-icon>
                        <v-list-item-content>
                            <v-list-item-title>个人中心</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                    <v-list-item
                            link
                            @click="logout"
                            color="transparency"
                    >
                        <v-list-item-icon>
                            <v-icon>mdi-clock</v-icon>
                        </v-list-item-icon>
                        <v-list-item-content>
                            <v-list-item-title>退出登录</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
            <v-divider></v-divider>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                        color="primary"
                        text
                        @click="show = false"
                >
                    关闭
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    import {auth} from "../common/cloudbase";

    export default {
        name: "UserInfoDialog",
        data:()=>({
            show: false,
            selectedItem: 0,
            items: [
                { text: '个人中心', icon: 'mdi-clock',to:"/user" },
                { text: '修改密码', icon: 'mdi-onepassword'},
                { text: '设置头像', icon: 'mdi-account-box-multiple'},
            ],
        }),
        methods:{
            goto(route){
                this.$router.push(route);
                this.show = false;
            },
            async logout(){
                if(!confirm("你确定要退出吗？")) return;
                try {
                    let status = await auth.signOut();
                    if(status){
                        this.$store.commit('setUserData',null);
                        this.$router.replace("/login");
                        this.$emit("show",false);
                        alert('退出登录成功');
                    }

                }catch (e) {
                    alert("退出登录失败");
                }
            }

        },
        model:{
            prop:"dialog",
            event:"show"
        },
        props:{
            dialog: Boolean
        },
        watch:{
            show(v){
                this.$emit("show",v);
            },
            dialog(v){
                this.$emit("show",v);
                this.show = v;
            }
        }
    }
</script>

<style scoped>

</style>